<template>
  <!-- 搜索 -->
  <div class="search-box">
    <div class="flex">
      <div>
        <el-icon><Search /></el-icon><span>筛选搜索</span>
      </div>
      <div>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="searchFn" type="primary">查询搜索</el-button>
      </div>
    </div>
    <div style="padding-top: 20px">
      <el-form @submit.prevent="search" ref="searchFormRef" :model="tableData">
        <el-form-item
          label="专题名称:"
          placeholder="专题名称"
          prop="subjectName"
          label-width="120px"
        >
          <el-input
            v-model="params.subjectName"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <!-- 选择推荐状态 -->
        <el-select
          v-model="params.recommendStatus"
          class="select"
          :placeholder="optionsVal"
          size="large"
          placement="top-start"
        >
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form>
    </div>
  </div>
  <div class="search-box">
    <div class="flex">
      <div class="left">
        <el-icon><Tickets /></el-icon>
        <span>数据列表</span>
      </div>
      <el-button plain @click="choiceFn">选择专题</el-button>
    </div>
  </div>
  <el-table
    :data="tableData"
    style="width: 100%"
    ref="remId"
    @selection-change="statusChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="subjectName" label="专题名称" />
    <el-table-column prop="recommendStatus" label="是否推荐">
      <template #default="scope">
        <el-switch
          v-model="scope.row.recommendStatus"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" />
    <el-table-column prop="recommendStatus" label="状态">
      <template #default="scope">
        {{ scope.row.recommendStatus === 1 ? "推荐中" : "未推荐" }}
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <!-- 设置排序 -->
        <el-button
          link
          type="primary"
          @click="sortFn(scope.row.sort, scope.row.id)"
          >设置排序</el-button
        >
        <el-button link tpye="primary">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页与批量 -->
  <div class="pagesize">
    <div>
      <Options @optionsFn="optionsPar" />
    </div>
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:currentPage="pageNum"
        v-model:page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next ,jumper"
        :total="total"
        @size-change="pageSizeChange"
        @current-change="pageNumChange"
        :page-sizes="[5, 10, 15]"
      />
    </ElConfigProvider>
  </div>
  <!-- 选择专题 -->
  <el-dialog v-model="choice" title="选择专题" width="50%">
    <div>
      <el-input
        v-model="params.keyword"
        style="width: 200px; height: 30px"
        size="large"
        placeholder="专题名称搜索"
      />
      <el-button @click="sizeChange" :icon="Search" />
    </div>
    <el-table
      ref="remId"
      :data="choiceData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" label="专题名称" />
      <el-table-column prop="categoryName" label="所属分类" />
      <el-table-column prop="createTime" label="添加时间">
        <template #default="scope">
          {{ fomatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 页脚 -->
    <div class="page">
      <el-pagination
        v-model:currentPage="params.pageNum"
        v-model:page-size="params.pageSize"
        layout="prev, pager, next"
        :total="page"
        @current-change="sizeChange"
        @size-change="pageChange"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="choice = false">取消</el-button>
        <el-button type="primary" @click="sureFn"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 排序子组件 -->
  <Sort
    :sort="sort"
    :sortid="sortid"
    :sortShow="sortShow"
    @sortAdd="sortSure"
  />
</template>
<script setup lang="ts">
import { Search, Tickets } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import { FormInstance } from "element-plus";
import { useTable } from "@/hooks/useTable";
import { comm } from "@/api";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
import { ElMessageBox, ElTable } from "element-plus";
import { fomatDate } from "@/utils";
import Sort from "@/views/sms/components/Sort.vue";
import Options from "./components/Options.vue";

interface IState {
  recommendStatus: number;
  subjectName: string;
  pageNum: number;
  pageSize: number;
  keyword: string;
}

let params = reactive<IState>({
  recommendStatus: 1,
  subjectName: "",
  pageNum: 1,
  pageSize: 5,
  keyword: "",
});

// 推荐状态
const optionsVal = ref("全部")
const status = reactive([
  {
    value: 1,
    label: "推荐中",
  },
  {
    value: 0,
    label: "未推荐",
  },
]);

const {
  tableData,
  pageNum,
  pageSize,
  total,
  pageNumChange,
  pageSizeChange,
  search,
} = useTable(comm.recommendSubjectListApi, params);

// 重置
const searchFormRef = ref<FormInstance>();
const resetForm = () => {
  searchFormRef.value?.resetFields();
};

const searchFn = () => {
  search();
};
//排序
const sort = ref(0);
const sortid = ref(0);
const sortShow = ref<boolean>(false);
const sortFn = (Sort: number, SortId: number) => {
  sortShow.value = true;

  sort.value = Sort;
  sortid.value = SortId;
};
const sortSure = (sortNum: number, sortidNum: number) => {
  ElMessageBox.confirm("是否要修改排序", "提示", {
    type: "warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    comm
      .recommendSortApi({ sort: sortNum, id: sortidNum })
      .then((res) => {
        if (res.code === 200) {
          sortShow.value = false;
          // 重新渲染
          searchFn();
        }
      })
      .catch(() => {});
  });
};
const sizeChange = (val: number) => {
  getSubject();
};
const pageChange = () => {
  getSubject();
};
const choiceFn = () => {
  choice.value = true;
  getSubject();
};
// 选择专题的请求

let remId = reactive<IRecommendList[]>([]);

const handleSelectionChange = (val: any) => {
console.log(val);


  val.map((item: IRecommendList) => {
    remId.push(item);
  });
};

// 选择专题显示隐藏
let choice = ref(false);

const page = ref(0);
// 选择专题的数据
let choiceData = reactive<ISubjectListData[]>([]);
const getSubject = () => {
  comm.subjectListApi(params).then((res) => {
    if (res.code === 200) {
      Object.assign(choiceData, res.data.list);
      page.value = res.data.total;
    }
  });
};

// 确定添加
const sureFn = () => {
  ElMessageBox.confirm("是否进行添加操作", "提示", {
    type: "warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    comm.recommendSubjectCreate(remId).then((res) => {
      if (res.code === 200) {
        // 关闭选择框
        choice.value = false
        // 重新渲染页面数据
        searchFn()
        // 把已勾选存放的数据清空，避免下次多个添加
        remId = []
      }
    }).catch(()=>{});
  });
};

let statusId = ref<number[]>([])
const statusChange = (val:any)=>{
  console.log(val);
  

  val.map((item:IRecommendList)=>statusId.value.push(item.id))
}

const optionsPar =(value:number)=>{
 
  comm.recommendSubjectStatusApi({ids:statusId.value,recommendStatus:value}).then(res=>{
    if(res.code===200){
      search()
      statusId.value = []
    }
  })
}
</script>

<style lang="less" scoped>
.search-box {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  .flex {
    display: flex;
    justify-content: space-between;
  }
}
.page {
  display: flex;
  justify-content: flex-end;
}
.pagesize {
  display: flex;
  justify-content: space-between;
}
.select {
    margin-left: 120px;
    width: 200px;
  }
</style>
